<template>
  <div class="giftStore">
    <!-- <div class="needGoods" @click="$router.push({name: 'wishList'})">
      <img src="@/assets/images/needGoods2.png" alt="img">
    </div> -->
    <!-- <div class="title">
      <navTitle :navArr="navArr">
        <div class="buttons" slot="right">
          <b class="text-button-b" @click="logisticShow=true">物流成本</b>
          <a href="../../../../static/html/video.html" target="_blank" class="text-button-b gift">视频演示</a>
        </div>
      </navTitle>
      <LogisticList v-if="logisticShow" @close="logisticShow=false"></LogisticList>
    </div> -->
    <div class="shopCarBox">
      <shopCar @setCommonPackage="addPackage"></shopCar>
    </div>
    <div class="replacePackage" v-if="replaceObj.show">
      <div class="replaceWrap">
        <h2>请选择替换下面哪个礼品包</h2>
        <ReplaceCommon :isFar="replaceObj.isFarObj" @setIdChange="replaceSetIdChange"></ReplaceCommon>
        <div class="footer">
          <b class="button-w" @click="closeRepalcePackage">取消</b>
          <b class="button-n" @click="sureRepalcePackage">确定</b>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../base/navTitle/index'
import LogisticList from '../../base/alert/logisticList'
import ShopCar from '../../base/shopCar/shopCarGift'
import ReplaceCommon from '../../base/myPackage/replaceCommon'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'giftStore',
  components: {
    NavTitle,
    LogisticList,
    ShopCar,
    ReplaceCommon
  },
  data () {
    return {
      navArr: ['礼品库'],
      logisticShow: false,
      replaceObj: {
        show: false,
        isFarObj: {},
        setId: '',
        oldSetId: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'commonPackage'
    ])
  },
  methods: {
    addPackage (checkedArr) {
      if (checkedArr.length === 0) {
        this.$message({
          message: '请选择商品至礼品包',
          type: 'warning'
        })
      } else {
        this.$ajax.post('/api/productSet/addSetTb', {
          sellerAccountId: this.userInfo.sellerAccountId,
          productIds: checkedArr
        }).then((data) => {
          if (data.data.code === '200') { // 添加礼品包成功
            this.replaceObj.setId = data.data.data.setId
            this.setCommon() // 成功添加之后设置常用
          } else {
            this.$message({
              message: data.data.message,
              type: 'warning'
            })
          }
        }).catch((err) => {
          console.error(err)
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        })
      }
    },
    setCommon () {
      if (this.commonPackage.length >= 3) { // 礼品包已设置满3个
        this.replaceObj.show = true
      } else {
        this.$ajax.post('/api/productSet/setCommonSet', {
          setId: this.replaceObj.setId,
          sellerAccountId: this.userInfo.sellerAccountId
          // oldSetId: ''
        }).then((data) => {
          if (data.data.code === '200') {
            this.$message({
              message: `设置成功,您还可以设置${2 - this.commonPackage.length}个`,
              type: 'success'
            })
            this.getCommonPackages()
          } else {
            this.$message({
              message: data.data.message,
              type: 'warning'
            })
          }
        }).catch((err) => {
          console.error(err)
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        })
      }
    },
    closeRepalcePackage () {
      this.replaceObj.oldSetId = ''
      this.replaceObj.show = false
    },
    sureRepalcePackage () {
      if (this.replaceObj.oldSetId === '') {
        this.$message({
          message: `请选择要替换的礼品包`,
          type: 'warning'
        })
      } else {
        this.$ajax.post('/api/productSet/setCommonSet', {
          setId: this.replaceObj.setId,
          sellerAccountId: this.userInfo.sellerAccountId,
          oldSetId: this.replaceObj.oldSetId
        }).then((data) => {
          if (data.data.code === '200') {
            this.$message({
              message: `设置成功`,
              type: 'success'
            })
            this.getCommonPackages()
            this.replaceObj.show = false
          } else {
            this.$message({
              message: data.data.message,
              type: 'warning'
            })
          }
        }).catch((err) => {
          console.error(err)
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        })
      }
    },
    replaceSetIdChange (arr) { // 替换礼品包改变时 arr [ setId money index ]
      this.replaceObj.oldSetId = arr[0]
      this.replaceObj.isFarObj = {
        farNum: 1,
        normalNum: 1
      }
    },
    getCommonPackages () { // 获取常用礼品包列表
      this.$ajax.post('/api/productSet/getCommonSetListBySellerAccountId', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          let res = data.data.data
          this.setCommonPackage(res)
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    ...mapActions([
      'setCommonPackage'
    ])
  },
  created () {
    this.getCommonPackages()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.giftStore
  width 100%
  height 100%
  display flex
  flex-direction column
  // overflow auto
  // box-sizing border-box
  .needGoods
    position relative
    width 928px
    height 100px
    overflow hidden
    img
      position absolute
      top 0
      left 0
      width 100%
      cursor pointer
  .wantOrder
    display flex
    justify-content space-between
    align-items center
    background rgba(247, 86, 76, 1)
    padding 10px 20px
    line-height 30px
    cursor pointer
    h2
      font-size 16px
      letter-spacing 1px
      font-weight bold
      font-family serif
      flex 1
      color #ffff00
      text-align center
    .links
      cursor pointer
      color #ffffff
  .title
    .buttons
      .gift
        margin-left 20px
        text-decoration none
  .shopCarBox
    flex 1
    overflow hidden
  .replacePackage
    position fixed
    z-index 13
    top 0
    left 0
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.6)
    overflow auto
    .replaceWrap
      position absolute
      text-align center
      top 20vh
      width 600px
      background #ffffff
      padding 30px 40px
      left 0
      right 0
      margin 0 auto
      h2
        font-size 18px
        font-weight bold
        line-height 30px
        margin-bottom 20px
      .footer
        text-align center
        margin-top 40px
</style>
